<template>
	<view>
		<u-navbar title=" " :is-back="false"></u-navbar>
		<view class="tabs-box">
			<u-tabs :list="tablist" :is-scroll="true" :current="current" @change="change"></u-tabs>
			<view class="icon-title">
				<u-icon name="search" size="32" @click="searchto()"></u-icon>
			</view>
		</view>
		<!-- 分类 -->
		<block v-if="current == 1 || current ==2">
			<view class="cate-list-box" >
				<view class="cate-list" v-for="(item,index) in cateList" :key='index'>
					{{item.name}}
					<view class="icon-name">
						<u-icon :name="item.icon" size="50rpx" color="#D19A57"></u-icon>
					</view>
				</view>
			</view>
			<!-- 今日必读 -->
			<view class="read-contain">
				<view class="read-title">
					<view class="title-body">
						今日必读
					</view>
					<view class="read-right">
						换一换
						<u-icon name="reload" size="24"></u-icon>
					</view>
				</view>
				<!-- 图片区域 -->
				<context></context>
			</view>
			<!-- 高分作品 -->
			<view class="work-box">
				<view class="work-title">
					<view class="title-name">
						高分神作
					</view>
					<view class="title-right-body">
						查看更多
						<u-icon name="arrow-right" size="28" color="gray"></u-icon>
					</view>
				</view>
				<block v-for="(item,i) in bookList" :key="i">
					<work-body :item="item"></work-body>
				</block>
				<!-- 列表自定义组件 -->

			</view>
			<!-- 新书上架 -->
			<new-book></new-book>
			<!-- 大家都在看 -->
			<view class="all-member-box">
				<view class="title-name">
					大家都在看
				</view>
				<block v-for="(item,i) in bookList" :key="i">
					<work-body :item="item"></work-body>
				</block>
			</view>
		</block>
	</view>
</template>

<script>
	import {
		bookList,
		tablist,
		cateList,womanBookList
	} from "@/utils/bodyList.js"
	export default {
		data() {
			return {
				tablist: tablist,
				cateList: cateList,
				bookList: bookList,
				current: 1,
			}
		},
		methods: {
			searchto(){
				uni.navigateTo({
					url:"../searchlist/searchlist"
				})
			},
			change(index) {
				this.current = index;
				if(index == 2){
					this.bookList = womanBookList;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabs-box {
		display: flex;
		justify-content: space-between;

		.icon-title {
			margin: 30rpx;
		}
	}

	.cate-list-box {
		margin: 20rpx;
		display: flex;
		justify-content: space-between;

		.cate-list {
			background: #F9F5F4;
			margin: 10rpx;
			font-size: 36rpx;
			color: #6B4014;
			border-radius: 20rpx;
			width: 180rpx;
			height: 180rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;

			.icon-name {
				position: absolute;
				bottom: 0rpx;
				right: 0rpx;

			}
		}
	}

	.read-contain {

		.read-title {
			display: flex;
			justify-content: space-between;

			.title-body {
				font-size: 40rpx;
				color: #EB2B35;
				font-weight: 800;
				font-family: "宋体";
				margin: 30rpx;
			}

			.read-right {
				color: gray;
				margin: 30rpx;

			}
		}
	}

	.work-box {
		margin: 20rppx;

		.work-title {
			display: flex;
			justify-content: space-between;

			.title-name {
				font-size: 40rpx;
				color: #EB2B35;
				font-weight: 800;
				font-family: "宋体";
				margin: 30rpx;
			}

			.title-right-body {
				color: gray;
				// margin: 30rpx;
				margin: auto 20rpx;
			}
		}
	}

	.all-member-box {
		margin: 20rppx;

		.title-name {
			font-size: 40rpx;
			color: #222222;
			font-weight: 800;
			font-family: "宋体";
			margin: 30rpx;
		}
	}
</style>
